lightbox: Fix banding issues with the vignette shader

Just as https://gitlab.gnome.org/GNOME/mutter/-/merge_requests/352
did for the MetaBackgroundActor in mutter, let's fix the vignette shader
in gnome-shell, too.

Based on a patch originally propsed by Nikita Churaev, see
https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/59.

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3942
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2133>

diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index 08bf5641d25680b8205254a9f10686980c2311f3..abb72eb5add61b9dbcdced3e338fd1313284e7cc 100644 (file)
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -9,18 +9,22 @@ var DEFAULT_FADE_FACTOR = 0.4;
 var VIGNETTE_BRIGHTNESS = 0.5;
 var VIGNETTE_SHARPNESS = 0.7;
 
-const VIGNETTE_DECLARATIONS = '\
-uniform float brightness;\n\
-uniform float vignette_sharpness;\n';
-
-const VIGNETTE_CODE = '\
-cogl_color_out.a = cogl_color_in.a;\n\
-cogl_color_out.rgb = vec3(0.0, 0.0, 0.0);\n\
-vec2 position = cogl_tex_coord_in[0].xy - 0.5;\n\
-float t = length(2.0 * position);\n\
-t = clamp(t, 0.0, 1.0);\n\
-float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);\n\
-cogl_color_out.a = cogl_color_out.a * (1.0 - pixel_brightness * brightness);';
+const VIGNETTE_DECLARATIONS = '                                              \
+uniform float brightness;                                                  \n\
+uniform float vignette_sharpness;                                          \n\
+float rand(vec2 p) {                                                       \n\
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);        \n\
+}                                                                          \n';
+
+const VIGNETTE_CODE = '                                                      \
+cogl_color_out.a = cogl_color_in.a;                                        \n\
+cogl_color_out.rgb = vec3(0.0, 0.0, 0.0);                                  \n\
+vec2 position = cogl_tex_coord_in[0].xy - 0.5;                             \n\
+float t = clamp(length(1.41421 * position), 0.0, 1.0);                     \n\
+float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);            \n\
+cogl_color_out.a *= 1.0 - pixel_brightness * brightness;                   \n\
+cogl_color_out.a += (rand(position) - 0.5) / 100.0;                        \n';
+
 
 var RadialShaderEffect = GObject.registerClass({
     Properties: {